import React, { useState, useMemo } from 'react'
import type { PointData, SearchResult } from '../types'

interface SearchPanelProps {
  pointsData: PointData[];
  onSearchResultSelect: (result: SearchResult) => void;
}

const SearchPanel: React.FC<SearchPanelProps> = ({ pointsData, onSearchResultSelect }) => {
  const [searchTerm, setSearchTerm] = useState('')

  // 搜索结果
  const searchResults = useMemo(() => {
    if (!searchTerm.trim()) return []

    const term = searchTerm.toLowerCase()
    return pointsData
      .map((data, index) => {
        const contentMatch = data.hoverContent.toLowerCase().includes(term)
        const locationMatch = data.location.toLowerCase().includes(term)
        
        if (contentMatch || locationMatch) {
          let matchedField: 'content' | 'location' | 'both' = 'content'
          if (contentMatch && locationMatch) matchedField = 'both'
          else if (locationMatch) matchedField = 'location'
          
          return { data, index, matchedField }
        }
        return null
      })
      .filter((result): result is SearchResult => result !== null)
  }, [pointsData, searchTerm])

  return (
    <div style={{
      width: '320px',
      height: '100vh',
      background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98))',
      backdropFilter: 'blur(15px)',
      borderRight: '1px solid rgba(0, 0, 0, 0.1)',
      padding: '20px',
      boxShadow: '2px 0 12px rgba(0, 0, 0, 0.1)',
      overflow: 'hidden',
      zIndex: 1000,
      display: 'flex',
      flexDirection: 'column'
    }}>
      {/* 搜索标题 */}
      <div style={{ 
        fontSize: '16px', 
        fontWeight: 'bold', 
        marginBottom: '15px',
        color: '#333',
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        justifyContent: 'center'
      }}>
        <span>🔍</span>
        搜索监测点
      </div>

      {/* 搜索输入框 */}
      <div style={{ marginBottom: '20px' }}>
        <input
          type="text"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          placeholder="搜索内容或地点..."
          style={{
            width: '100%',
            padding: '12px 16px',
            border: '2px solid rgba(255, 102, 0, 0.2)',
            borderRadius: '25px',
            fontSize: '14px',
            outline: 'none',
            background: 'rgba(255, 255, 255, 0.9)',
            transition: 'all 0.3s ease',
            boxSizing: 'border-box'
          }}
          onFocus={(e) => {
            e.target.style.borderColor = '#ff6600'
            e.target.style.boxShadow = '0 0 0 3px rgba(255, 102, 0, 0.1)'
          }}
          onBlur={(e) => {
            e.target.style.borderColor = 'rgba(255, 102, 0, 0.2)'
            e.target.style.boxShadow = 'none'
          }}
        />
      </div>

      {/* 搜索统计 */}
      {searchTerm && (
        <div style={{
          padding: '8px 12px',
          background: 'rgba(255, 102, 0, 0.1)',
          borderRadius: '8px',
          marginBottom: '15px',
          fontSize: '12px',
          color: '#ff6600',
          fontWeight: 'bold',
          textAlign: 'center'
        }}>
          找到 {searchResults.length} 个匹配结果
        </div>
      )}

      {/* 搜索结果列表 */}
      <div style={{
        flex: 1,
        overflowY: 'auto',
        padding: '0 2px'
      }}>
        {searchResults.length > 0 ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            {searchResults.map((result, index) => (
              <div
                key={index}
                onClick={() => onSearchResultSelect(result)}
                style={{
                  padding: '12px',
                  background: 'rgba(255, 255, 255, 0.8)',
                  borderRadius: '10px',
                  border: '1px solid rgba(0, 0, 0, 0.05)',
                  cursor: 'pointer',
                  transition: 'all 0.3s ease',
                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-2px)'
                  e.currentTarget.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.12)'
                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.95)'
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)'
                  e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.08)'
                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.8)'
                }}
              >
                {/* 地点信息 */}
                <div style={{
                  fontSize: '13px',
                  fontWeight: 'bold',
                  color: '#333',
                  marginBottom: '6px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '6px'
                }}>
                  <span style={{
                    background: result.matchedField === 'location' || result.matchedField === 'both' 
                      ? 'rgba(255, 102, 0, 0.2)' 
                      : 'rgba(0, 0, 0, 0.1)',
                    padding: '2px 6px',
                    borderRadius: '4px',
                    fontSize: '11px',
                    color: result.matchedField === 'location' || result.matchedField === 'both' 
                      ? '#ff6600' 
                      : '#666'
                  }}>
                    📍
                  </span>
                  {result.data.location}
                </div>

                {/* 内容信息 */}
                <div style={{
                  fontSize: '12px',
                  color: '#666',
                  marginBottom: '6px',
                  lineHeight: '1.4',
                  padding: '6px 8px',
                  background: result.matchedField === 'content' || result.matchedField === 'both' 
                    ? 'rgba(255, 102, 0, 0.1)' 
                    : 'rgba(0, 0, 0, 0.05)',
                  borderRadius: '6px'
                }}>
                  {result.data.hoverContent}
                </div>

                {/* 时间和坐标 */}
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  fontSize: '10px',
                  color: '#888'
                }}>
                  <span>⏰ {result.data.time}</span>
                  <span>📍 {result.data.latitude.toFixed(3)}, {result.data.longitude.toFixed(3)}</span>
                </div>

                {/* 匹配标识 */}
                <div style={{
                  marginTop: '6px',
                  fontSize: '10px',
                  color: '#ff6600',
                  fontWeight: 'bold'
                }}>
                  {result.matchedField === 'both' && '🎯 内容和地点匹配'}
                  {result.matchedField === 'content' && '📝 内容匹配'}
                  {result.matchedField === 'location' && '📍 地点匹配'}
                </div>
              </div>
            ))}
          </div>
        ) : searchTerm ? (
          <div style={{
            textAlign: 'center',
            color: '#666',
            fontSize: '14px',
            padding: '40px 20px'
          }}>
            <div style={{ fontSize: '24px', marginBottom: '10px' }}>🔍</div>
            <div>未找到匹配的结果</div>
            <div style={{ fontSize: '12px', marginTop: '8px', color: '#999' }}>
              尝试使用其他关键词搜索
            </div>
          </div>
        ) : (
          <div style={{
            textAlign: 'center',
            color: '#666',
            fontSize: '14px',
            padding: '40px 20px'
          }}>
            <div style={{ fontSize: '24px', marginBottom: '10px' }}>💡</div>
            <div>输入关键词开始搜索</div>
            <div style={{ fontSize: '12px', marginTop: '8px', color: '#999' }}>
              可搜索监测点内容或地点信息
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default SearchPanel 